<template>
    <div>
        <div class="selected-result">
            <div class="clearfix result" style="margin: -6px -20px; padding: 6px 0;">
                <span class="selected-title">充值活动</span>
                <span class="change" @click="changeActivity">(点击更换充值活动)</span>
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="18">
                        <div style="display: inline-block">
                            <div style="display:inline-block;vertical-align: top;">
                                <div class="info-img" style="margin-right: 20px;margin-left: 15px;padding: 6px 0;">
                                    <img v-if="selectActivity.pictureNames" :src="static_url + selectActivity.pictureNames">
                                    <img v-else src="../../../../static/img/parkage.png">
                                </div>
                            </div>
                            <div class="grid-content text" style="display: inline-block">
                                <h6 class="l1">{{selectActivity.name}}</h6>
                                <p class="l2">{{ selectActivity.remark || '暂无详情描述～' }}</p>
                                <span>单价：<span class="member-price">{{  Number(selectActivity.price).toFixed(2)}}</span></span>
                            </div>
                        </div>

                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content account ">
                            <el-input-number v-model="num1" :min="1" :max="10" @change="priceChange" ></el-input-number>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="selected-result" style="margin-top: 10px">
            <div class="clearfix result" style="margin: -6px -20px;padding: 6px 0;">
                <span class="selected-title">活动详情</span>
                <span class="change"></span>
            </div>
            <div class="card-01 result">
                <el-row :gutter="20" >
                    <el-col :span="3" class="text-center" v-if="actItem.length=='0'">
                        <div style="width: 100px;height: 130px;text-align: center">
                            <div class="info-img">
                                <img  src="../../../../static/img/goods.png">
                            </div>
                            <div class="grid-content text pt10">
                                <p class="l1">暂无活动详情</p>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3" class="text-center" v-for="act in actItem">
                        <div style="width: 100px;height: 130px;text-align: center">
                            <div class="info-img">
                                <img v-if="act.goods.pictureName" :src="static_url + act.goods.pictureName">
                                <img v-else src="../../../../static/img/goods.png">
                            </div>
                            <div class="grid-content text pt10">
                                <p class="l1">{{ act.goods.name }}</p>
                                <span class=""><i class="member-price">{{ act.quantity }}</i>{{ act.goods.unit }}</span>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <!--<div v-show="isEmpty">-->
                    <!--无-->
                <!--</div>-->
            </div>

        </div>

        <div class="selected-result" style="margin-top: 10px">
            <div class="clearfix result" style="margin: -6px -20px;padding: 6px 0;">
                <span class="selected-title">会员</span>
                <span class="change" @click="changeMember">(点击更换会员)</span>
            </div>
            <div class="card-01 result">
                <el-row :gutter="20">
                    <el-col :span="3" class="text-center">
                        <div style="width: 100px;height: 110px;text-align: center">
                            <div class="info-img">
                                <img v-if="selectMember.portraitName" :src="static_url + selectMember.portraitName">
                                <img v-else src="../../../../static/img/member.png">
                            </div>

                            <span class="l1">{{selectMember.name}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="step3">
            <div class="pdb10 btns tr">
                <span class="selected-title list-bottom-span">支付方式</span>
                <el-select v-model="value" placeholder="现金" class="num-bottom-select">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
                <span class="list-bottom-span">应收</span><el-input v-model="receivable" disabled class="num-bottom-input"></el-input>
                <span class="list-bottom-span">实收</span><el-input v-model="received" class="num-bottom-input"></el-input>
                <el-button class="red-btn"  @click="toDeposit"> 立即充值 </el-button>
            </div>
        </div>
    </div>
</template>


<script>
    import { MessageBox } from 'element-ui';
    export default {
        name:'keepailveselectrecord',
        components: {},
        props: {
            selectActivity: '',
            selectMember: '',
            actItem:''
        },
        data: function () {
            return {
//                fullscreenLoading: true,
                allItems: [],
                items: [],
                rows: 16,//显示数量
                page: 1,//当前页数
                totalPage: 0,//总页数
                goodItem: [],
                list: [],
                num1: 1,
                options: [{
                    value: 20,
                    label: '现金'
                }, {
                    value: 70,
                    label: '支付宝'
                }, {
                    value: 80,
                    label: '银行卡'
                },
                {
                    value: 60,
                    label: '微信'
                }],
                value: '',
                receivable: 0.00,
                received: 0.00,
                quantity:1,
                static_url: this.$cfg.static_url + "/"
//                isEmpty:false
            }
        },
        activated: function () {
            this.$$("#content").scrollTop(0)
            this.initPrice();
        },
        methods: {
            initPrice(){
                this.receivable=Number(this.selectActivity.price).toFixed(2);
                this.received=Number(this.selectActivity.price).toFixed(2);
            },
            changeActivity(){
//                console.log(this.selectActivity)
                this.$emit('changeActivity', '');
            },
            changeMember(){
                this.$emit('changeMember', '');
            },
            priceChange(value){
//                console.log(value)
                console.log(value)
                console.log(typeof(value))
                this.num1=value.toString().replace(/[^0-9]/g,'')
                this.quantity=value;
                this.receivable=Number(parseFloat(this.selectActivity.price) * value).toFixed(2);
                this.received=Number(parseFloat(this.selectActivity.price) * value).toFixed(2);
            },
            toDeposit(){
                console.log(this.value)
                var param={
                    'memberId':this.selectMember.id,
                    'goodsPackageId':this.selectActivity.id,
                    'received':this.receivable,
                    'quantity':this.quantity,
                    'payment':Number(this.value)||20,
                    'received':this.received
                };
                console.log(param);
                let self = this;
                var aaa=this.value;
                console.log(111)
                console.log(param.payment)
                if(param.payment==''){
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: '支付方式不能为空'
                    });
                }else{
                    this.$axioxs.post("/charge/", this.$qs.stringify(param))
                        .then(function () {

                                self.$message({
                                    showClose: true,
                                    type: 'success',
                                    message: '充值成功'
                                });
                                self.$emit('changePage', '');
                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            })
                }

            }

        },

    }

</script>
<style scoped>
    .step3 .btns{
        width:65%;
        right:0;
    }
    .btns .red-btn{
        margin-left: 15px;
    }
    .selecct-memeber {
        margin-left: 20px;
    }

    .pt10 {
        padding-top: 10%;
    }
    .img{
        width: 90px;
        height: 90px;
        margin: 10px auto;
    }
    .info-img{
        width: 75px;
        height: 75px;
        margin: 5px auto;
        display: inline-block;
    }
    .info-img img{
        width: 75px;
        height: 75px;
    }
    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
    }
    .list-bottom-span{
        color: #fff;
    }
    .num-bottom-input{
        width: 15%;
    }
    .num-bottom-select{
        width: 14%;
    }
    .selected-result .result{
        background: #fff;
    }
</style>